<template>
    <div class="alipay">
        <div id="alipayFoRm">
            <form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=CsjQ3JVjNEfz54nv4%2B7mjP3%2FsfoNVKs28btks0GJuwrr5wMbu3lFsXicD39JXhwlYx10XTGBF001FZFM5xAeJOzEeVENtuAZzcH9A%2BSTMiCDj5%2BH0%2Bnmx0xbC9ADgSgPGbWhlobytW1%2FDdvkxQ27QBVPtUDndFq72r7X6XvLO3b6rYc5To6EVXjr8BNvQWeMyvBocxv%2F3ANqagPod5uB2fz13tyN6C8Xb9%2F0VLiiP%2FmK5drGJOiKD8BvolgfMk29zfrl%2FZHgZXpM3IcATVKqj%2FL7ud2KHNczoxxWs71aSxiibxuUWIJA2EbNXcf0oFmzu%2FBYT9N%2F%2Fn1srtxd7K2%2BQQ%3D%3D&return_url=http%3A%2F%2F192.168.1.108%3A90%2Freturn_url.jsp&notify_url=http%3A%2F%2F192.168.1.108%3A80%2F%23%2FOrderConfirm&version=1.0&app_id=2016101800718027&sign_type=RSA2&timestamp=2020-03-10+15%3A14%3A42&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
                <input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;null&quot;,&quot;subject&quot;:&quot;null&quot;,&quot;total_amount&quot;:&quot;null&quot;,&quot;body&quot;:&quot;null&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}">
                <input type="submit" value="立即支付" style="display:none" >
            </form>

        </div>
        <div class="alipay_content">
            <h2>支付宝支付</h2>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商户订单号" label-width="200px">
                    <el-input v-model="form.trade_no" readonly></el-input>
                </el-form-item>
                <el-form-item label="订单名称" label-width="200px">
                    <el-input v-model="form.subject" readonly></el-input>
                </el-form-item>
                <el-form-item label="付款金额" label-width="200px">
                    <el-input v-model="form.total_amount" readonly></el-input>
                </el-form-item>
                <el-form-item label="商品描述" label-width="200px">
                    <el-input v-model="form.body" readonly></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">付款￥{{form.totalAmount}}</el-button>
                </el-form-item>
                <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
            </el-form>
        </div>
        <div>
            {{formValue}}
        </div>
    </div>

</template>

<script>
    // import $ from 'jquery';
    import qs from 'qs';
    export default {
        name: "Alipay",
        data(){
            return{
                form: {
                    trade_no:45565522,
                    subject:45565522,
                    total_amount:Math.round(Math.random()*1000),
                    body:'商品小难度肚',
                },
                formValue: null,
                confirmbill:null,
                orderInfo:null,

            }
        },
        mounted() {
            console.log(66);
        },
        created() {
            console.log(555);
            this.getOrderInfo();

        },
        methods:{
            getOrderInfo(){
                this.confirmbill = this.$store.state.confirmbill;
                console.log(this.confirmbill);
                this.form.subject = this.confirmbill.shopGoods.goodsid;
                this.form.total_amount= this.confirmbill.goodprice;
                this.form.body = this.confirmbill.goodname;
                this.orderInfo = this.$store.state.newOrderInfo;
                console.log(this.orderInfo);
            },
            onSubmit() {
                let formData = new FormData();
                formData.append("orderId",this.form.trade_no);
                formData.append("orderInfo",this.form.subject);
                formData.append("totalPay",this.form.total_amount);
                formData.append("descOrder",this.form.body);
                console.log(this.form);
                console.log(formData);
                this.$axios.post("/alipay/pay",formData).then(res=>{
                    console.log(res);
                    console.log(55);
                    //返回参数
                    const div = document.createElement('div');
                    div.innerHTML = res.data;
                    document.body.appendChild(div);
                    document.forms[0].submit()
                })
            }
        }

    }
</script>

<style scoped>
    .alipay{
        width: 100%;
        height: 560px
    }
    .alipay_content{
        /*outline: 1px solid red;*/
        width: 800px;
        height: 500px;
        margin: 0 auto;
        text-align: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .el-input{
        width: 400px;
        float: left;
    }
    /**/

</style>